<template>
<div class="common-body-wrapper">
  <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" :isNeedTree="true" :isCheckbox="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
  <div class="common-table-tree-wrapper">
    <!-- <table-tree :isNeedTree="isNeedTree" :paramName="paramName" @toggleTreeBox="toggleTreeBox" @setSelectedNode="setSelectedNode" @searchFn="getList">
      </table-tree> -->
    <div class="common-table-wrapper">
      <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
        <!--按钮-->
        <div class="operate-btn-group" slot="operateBtnGroup">
          <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:DETAIL:EXPORT')" @click.prevent="exportData()">导出</a>
        </div>

        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="props.prop=='sendStatussDisplay'&&scope.$index==0">合计</span>
              <span v-else-if="'totalValueDisplay' == props.prop">{{ scope.row.totalValueDisplay |formatMoney }}</span>
              <span v-else-if="'refundValueDisplay' == props.prop">{{ scope.row.refundValueDisplay |formatMoney }}</span>
              <span v-else-if="'couponValue' == props.prop">{{ scope.row.couponValue |formatMoney }}</span>
              <span v-else-if="'infactValueDisplay' == props.prop">{{ scope.row.infactValueDisplay |formatMoney }}</span>
              <!-- <span v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='0'" @click="copyLink(scope.row)" class="row-href">点击复制开票链接</span> -->
              <!--一点停暂不支持，先注释掉-->
              <span v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='1'">无</span>
              <a v-else-if="'invoiceFilePath' == props.prop && scope.row['isOpenInvoice']=='2'" :href="scope.row['invoiceFilePath']" download="invoice.pdf" class="row-href">已开票，点击下载</a>
              <span v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>

        <!--操作列内的按钮-->
        <template slot="operateCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" width="80" class="operateCell">
            <template slot-scope="scope">
              <el-button :disabled="!(scope.$index!==0 && scope.row.parkSysType == 0 && scope.row.clientSystem != 2)" size="small" type="primary" icon="icon-synchronize" class="ake-icon-font" title="同步详情" @click="syncDetail(scope.row.id,true)" plain></el-button>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <!---->
      <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    </div>
  </div>

  <!--同步详情-->
  <basic-modal ref="syncDetailModal" width="900" customeClass="sync-detail-modal" static="true">
    <h3 slot="title">同步详情</h3>
    <div class="modal-body" slot="modal-body">
      <multi-fun-table hasCheckboxCol="false" tableBoxId="syncDetailTable" isNeedPrint="false" isSetTable="false" sortColumn='' orderType='' fixed-cols="0" :theads-info="syncDetailModal.theadsInfo" :tbodys-info="syncDetailModal.syncDetailList">
        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'sendStatus' == props.prop">{{scope.row.sendStatus|sendStatus}}</span>
              <span v-else-if="'operate' == props.prop">
                <el-button size="small" type="primary" class="ake_btn_text" @click="reSync(scope.row)" v-if="isPermmited('MONTH:TICKET:BILL:RENEW')">重新同步</el-button>
              </span>
              <span :title="scope.row[props.prop]" v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('syncDetailModal')">关闭</button>
    </div>
  </basic-modal>

</div>
</template>

<script>
import common from '@mixins/common.js'
import stardardList from '@mixins/tables/stardardList.js'

//modal
import invokeModal from '@mixins/modal/invokeModal.js'

// 引进vue的js
import trader from './js/bill_detail.js'

export default {
  name: 'monthTicketBillDetail',
  mixins: [common, stardardList, invokeModal, trader],
  data() {
    const today = [new Date(moment().format('YYYY-MM-DD 00:00:00')), new Date(moment().format('YYYY-MM-DD 23:59:59'))];
    return {
      total: 0,
      fixedCols: 4,
      paramName: 'parkId',
      searchList: [
        { //复合型输入框
          index: 0,
          isShow: false,
          type: "mixedInput",
          name: "query_carCode",
          text: "",
          value: "query_carCode",
          inputVal: "",
          style: {
            width: "70px"
          },
          isHandleChange: true,
          btnFlag: 'query_logicCardCode',
          options: [{
              name: "车牌号",
              value: "query_carCode"
            },
            {
              name: "逻辑卡号",
              value: "query_logicCardCode"
            },
            {
              name: "卡面号码",
              value: "query_faceCardCode"
            }
          ]
        },
        {
          index: 1,
          isShow: false,
          type: 'select',
          name: 'query_billType',
          text: '流水类型',
          value: '',
          options: [{
              name: '--全部--',
              value: ''
            },
            {
              name: '开通',
              value: '0'
            },
            {
              name: '续费',
              value: '1'
            },
            {
              name: '退款',
              value: '2'
            }
          ]
        },
        {
          index: 2,
          isShow: false,
          type: 'datePicker',
          name: 'query_updateTime',
          text: '操作时间',
          propName: 'query_updateTimeStart,query_updateTimeEnd',
          value: today,
          style: {
            width: '360px'
          }
        },
        {
          index: 3,
          isShow: false,
          type: 'text',
          name: 'query_ticketName',
          text: '月票类型',
          value: ''
        },
        // {
        //   index: 1,
        //   isShow: false,
        //   type: 'text',
        //   name: 'query_userPhone',
        //   text: '车主电话',
        //   value: ''
        // },
        // {
        //   index: 3,
        //   isShow: false,
        //   type: 'datePicker',
        //   name: 'query_valid',
        //   text: '有效时间',
        //   propName: 'query_validFrom,query_validEnd',
        //   value: '',
        //   style: {
        //     width: '360px'
        //   }
        // },
        {
          index: 4,
          isShow: false,
          type: 'select',
          name: 'query_payOrigin',
          text: '支付来源',
          value: '',
          options: [{
              name: '--全部--',
              value: ''
            },
            {
              name: '未定义',
              value: '0'
            },
            {
              name: '出入口',
              value: '1'
            },
            {
              name: '中央缴费',
              value: '2'
            },
            {
              name: '自助缴费机',
              value: '3'
            },
            {
              name: '平板',
              value: '4'
            },
            {
              name: '移动POS机',
              value: '5'
            },
            {
              name: '移动APP',
              value: '6'
            },
            {
              name: '微信服务号',
              value: '7'
            },
            {
              name: '支付宝服务窗',
              value: '8'
            },
            {
              name: '线上支付',
              value: '9'
            },
            {
              name: '独立H5',
              value: '10'
            },
            {
              name: 'POMP',
              value: '11'
            },
            {
              name: 'VEMS',
              value: '12'
            },
            {
              name: 'AOMP',
              value: '13'
            },
            {
              name: '微信小程序',
              value: '14'
            },
            {
              name: '支付宝小程序',
              value: '15'
            },
          ]
        },
        {
          index: 5,
          isShow: false,
          type: 'select',
          name: 'query_payMode',
          text: '支付方式',
          value: '',
          options: [{
              name: '--全部--',
              value: ''
            },
            {
              name: '未定义',
              value: '0'
            },
            {
              name: '现金',
              value: '1'
            },
            {
              name: '自发卡',
              value: '2'
            },
            {
              name: '次数',
              value: '3'
            },
            {
              name: '微信支付',
              value: '4'
            },
            {
              name: '支付宝支付',
              value: '5'
            },
            {
              name: '银联闪付',
              value: '6'
            },
            {
              name: '交通卡',
              value: '7'
            },
            {
              name: '免费',
              value: '8'
            },
            {
              name: '余额账户',
              value: '9'
            },
            {
              name: '银联接触卡',
              value: '10'
            },
            {
              name: '银联网络支付',
              value: '11'
            },
            {
              name: '第三方余额',
              value: '12'
            },
            {
              name: 'NFC',
              value: '13'
            },
            {
              name: '普通储蓄卡',
              value: '14'
            },
            {
              name: '信用卡',
              value: '15'
            },
            {
              name: '微信免密',
              value: '16'
            },
            {
              name: '支付宝免密',
              value: '17'
            },
            {
              name: '腾讯无感支付',
              value: '18'
            },
            {
              name: 'ETC',
              value: '19'
            },
            {
              name: '手动转账',
              value: '20'
            },
            {
              name: '微信无感支付',
              value: '21'
            },
            {
              name: '支付宝无感支付',
              value: '22'
            },
            {
              name: '银联无感支付',
              value: '23'
            },
          ]
        },
        // {
        //   index: 6,
        //   isShow: false,
        //   type: 'select',
        //   name: 'query_ticketType',
        //   text: '月票是否允许线上开通',
        //   value: '',
        //   options: [{
        //       name: '--全部--',
        //       value: ''
        //     },
        //     {
        //       name: '不允许',
        //       value: '0'
        //     },
        //     {
        //       name: '允许',
        //       value: '1'
        //     }
        //   ]
        // },
        {
          index: 6,
          isShow: false,
          type: 'text',
          name: 'query_updateBy',
          text: '操作员',
          value: ''
        },
        {
          index: 7,
          isShow: false,
          type: 'select',
          name: 'query_isOpenInvoice',
          text: '是否开票',
          value: '',
          options: [{
              name: '全部',
              value: ''
            },
            {
              name: '未开票',
              value: '0'
            },
            {
              name: '纸质票',
              value: '1'
            },
            {
              name: '电子票',
              value: '2'
            },
          ]
        },
        {
          index: 8,
          isShow: false,
          type: 'text',
          name: 'query_invoiceNumber',
          text: '发票号码',
          value: ''
        },
        // {
        //     index: 13,
        //     isShow: false,
        //     initShow: sessionStorage.getItem("isShowOperator") == "false" ? false : true,
        //     type: "text",
        //     name: "query_operatorName",
        //     text: "运营商名称",
        //     value: ""
        //   }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 68 },
        {
          index: 0,
          isShow: false,
          prop: 'sendStatussDisplay',
          text: '下发状态',
          minWidth: 50
        },
        {
          index: 1,
          isShow: false,
          prop: 'ticketName',
          text: '月票类型名称',
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: 'carCode',
          text: '车牌号码',
          minWidth: 60
        },
        {
          index: 3,
          isShow: false,
          prop: 'userName',
          text: '车主姓名',
          minWidth: 60,
          initHidden: true
        },
        {
          index: 4,
          isShow: false,
          prop: 'userPhone',
          text: '手机号码',
          minWidth: 60,
          initHidden: true
        },
        {
          index: 5,
          isShow: false,
          prop: 'parkName',
          text: '适用停车场',
          minWidth: 50
        },
        {
          index: 6,
          isShow: false,
          prop: 'billTypeDisplay',
          text: '流水类型',
          minWidth: 50
        },
        {
          index: 7,
          isShow: false,
          prop: 'validTimesDisplay',
          text: '有效期',
          minWidth: 130
        },
        {
          index: 8,
          isShow: false,
          prop: 'totalValueDisplay',
          text: '原价(元)',
          minWidth: 50,
          initHidden: true
        },
        {
          index: 9,
          isShow: false,
          prop: 'refundValueDisplay',
          text: '退款金额(元)',
          minWidth: 50,
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: 'couponValue',
          text: '优惠金额(元)',
          minWidth: 50,
          initHidden: true
        },
        {
          index: 11,
          isShow: false,
          prop: 'infactValueDisplay',
          text: '实收金额(元)',
          minWidth: 50
        },
        // {
        //   index: 12,
        //   isShow: false,
        //   prop: 'ticketTypeDisplay',
        //   text: '月票是否允许线上开通',
        //   minWidth: 50,
        //   initHidden: true
        // },
        {
          index: 12,
          isShow: false,
          prop: 'payOriginDisplay',
          text: '支付来源',
          minWidth: 50,
        },
        {
          index: 13,
          isShow: false,
          prop: 'payModeDisplay',
          text: '支付方式',
          minWidth: 50,
        },
        // {
        //   index: 15,
        //   isShow: false,
        //   prop: 'topBillCodeDisplay',
        //   text: '月票流水号',
        //   minWidth: 80,
        //   initHidden: true
        // },
        {
          index: 14,
          isShow: false,
          prop: 'billCodeDisplay',
          text: '支付流水号',
          minWidth: 80,
          initHidden: true
        },
        {
          index: 15,
          isShow: false,
          prop: 'thirdBillCodeDisplay',
          text: '第三方支付流水号',
          minWidth: 80,
          initHidden: true
        },
        {
          index: 16,
          isShow: false,
          prop: 'updateByDisplay',
          text: '操作员',
        },
        {
          index: 17,
          isShow: false,
          prop: 'updateTimeDisplay',
          text: '时间',
          minWidth: 80,
        },
        {
          index: 18,
          isShow: false,
          prop: 'remarkDisplay',
          text: '备注',
        },
        {
          index: 19,
          isShow: false,
          prop: 'isOpenInvoiceStr',
          text: '是否开票',
          sortable: true,
          initHidden: true
        },
        {
          index: 20,
          isShow: false,
          prop: 'invoiceNumber',
          text: '发票号码',
          sortable: true,
          minWidth: 80,
          initHidden: true
        },
        {
          index: 21,
          isShow: false,
          prop: 'invoiceFilePath',
          text: '开票链接',
          sortable: true,
          minWidth: 110,
          initHidden: true
        },
      ],
      tbodysInfo: []
    }
  }
}
</script>

<style lang="less">
.sync-detail-modal {
  padding-bottom: 30px;

  .modal-body {
    max-height: 400px;
    min-height: 300px;
    overflow-y: scroll;
  }

  #syncDetailTable {
    height: 300px;
  }
}
</style>
